<template>
	<div class="app-container">
		<!-- 查询和其他操作 -->
		<div class="filter-container">
			<el-input v-model="listQuery.receiver" clearable class="filter-item" style="width: 200px"
			          placeholder="请输入收货人"/>
			<el-input v-model="listQuery.orderNum" clearable class="filter-item" style="width: 200px"
			          placeholder="请输入订单编号"/>
			<el-select v-model="listQuery.status" style="width: 200px" class="filter-item" placeholder="请选择订单状态">
				<el-option v-for="(key, value) in statusMap" :key="key" :label="key" :value="value"/>
			</el-select>
			<el-button v-permission="[1, 2]" class="filter-item" type="primary" icon="el-icon-search"
			           @click="handleFilter">查找
			</el-button>
		</div>

		<!-- 查询结果 -->
		<el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit
		          highlight-current-row>

			<el-table-column align="center" width="160" label="操作">
				<template slot-scope="scope">
					<el-button v-permission="[1, 2]" type="primary" size="mini"
					           @click="handleDetail(scope.row)">详情
					</el-button>
					<el-button v-permission="[1, 2]" v-if="scope.row.status === 2" type="primary"
					           size="mini" @click="handleShip(scope.row)">发货
					</el-button>
					<el-button v-permission="[1]" v-if="scope.row.status === 8" type="primary"
					           size="mini" @click="handleRefund(scope.row)">退款
					</el-button>
				</template>
			</el-table-column>

			<el-table-column align="center" label="订单编号" prop="orderNum"/>

			<el-table-column align="center" width="80" label="用户ID" prop="userId"/>

			<el-table-column align="center" width="120" label="订单状态" prop="status">
				<template slot-scope="scope">
					<el-tag>{{ scope.row.status | orderStatusFilter }}</el-tag>
				</template>
			</el-table-column>

			<el-table-column align="center" width="120" label="支付渠道" prop="payType">
				<template slot-scope="scope">
					<el-tag>{{ scope.row.payType | payChannelFilter }}</el-tag>
				</template>
			</el-table-column>

			<el-table-column align="center" width="100" label="订金" prop="actualPrice">
				<template slot-scope="scope">
					¥ {{ scope.row.deposit }}
				</template>
			</el-table-column>

			<!--<el-table-column align="center" label="支付金额" prop="actualPrice"/>-->

			<el-table-column align="center" label="创建时间" prop="createTime">
				<template slot-scope="scope">
					{{ scope.row.createTime | formatTime }}
				</template>
			</el-table-column>

			<el-table-column align="center" label="物流渠道" prop="shippingType">
				<template slot-scope="scope">
					<el-tag>{{ scope.row.shippingType | shipCodeFilter }}</el-tag>
				</template>
			</el-table-column>

		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
		            @pagination="getList"/>

		<!-- 订单详情对话框 -->
		<el-dialog :visible.sync="orderDialogVisible" title="订单详情" width="800">
			<el-form :data="orderDetail" label-position="left">
				<el-form-item label="订单编号">
					<span>{{ orderDetail.orderNum }}</span>
				</el-form-item>
				<el-form-item label="用户id">
					<span>{{ orderDetail.userId }}</span>
				</el-form-item>
				<el-form-item label="订单状态">
					<template>
						<el-tag>{{ orderDetail.status | orderStatusFilter }}</el-tag>
					</template>
				</el-form-item>
				<el-form-item label="支付渠道">
					<template>
						<el-tag>{{ orderDetail.payType | payChannelFilter }}</el-tag>
					</template>
				</el-form-item>
				<el-form-item label="发货渠道">
					<span v-if="orderDetail.shippingType == 0">物流</span>
					<span v-if="orderDetail.shippingType == 1">整车</span>
				</el-form-item>
				<el-form-item label="用户备注">
					<span>{{ orderDetail.invoiceType }}</span>
				</el-form-item>
				<el-form-item label="订金">
					<template>
						￥{{ orderDetail.deposit }}
					</template>
				</el-form-item>
				<el-form-item label="配送费">
					<template>
						￥{{ orderDetail.postFee }}
					</template>
				</el-form-item>
				<el-form-item label="快递信息">
					<template v-if="orderDetail.shippingType == 0">
						<span>（单号）{{ orderDetail.shipmentNumber }}</span>
						<span>（配送人）{{ orderDetail.shippingName }}</span>
						<span>（电话）{{ orderDetail.shippingPhone }}</span>
					</template>
				</el-form-item>
				<el-form-item label="司机信息">
					<template v-if="orderDetail.shippingType == 1">
						<span>（司机）{{ orderDetail.driverName }}</span>
						<span>（手机号）{{ orderDetail.driverPhone }}</span>
						<span>（车牌号）{{ orderDetail.numberPalte }}</span>
					</template>
				</el-form-item>
				<el-form-item label="收货信息">
					<span>（收货人）{{ orderDetail.receiver }}</span>
					<span>（手机号）{{ orderDetail.receiverMobile }}</span>
					<span>（地址）{{ orderDetail.receiverAreaName }}</span>
				</el-form-item>
				<el-form-item label="商品信息">
					<span>（名称）{{ orderDetail.goodsName }}</span>
					<span>（规格）{{ orderDetail.specification }}</span>
					<span>（商品数量）{{ orderDetail.buyCount }}</span>
					<span>（单价/元）{{ orderDetail.price }}</span>
					<span>（订金/元）{{ orderDetail.deposit }}</span>
				</el-form-item>
				<el-form-item label="备注">
					<template>
						{{ orderDetail.invoiceType }}
					</template>
				</el-form-item>

			</el-form>
		</el-dialog>

		<!-- 发货对话框 -->
		<el-dialog :visible.sync="shipDialogVisible" title="发货">
			<el-form ref="shipForm" :model="shipForm" :rules="shipRules" status-icon label-position="left"
			         label-width="100px" style="width: 400px; margin-left:50px;">
				<el-form-item label="发货方式">
					<template>
						<el-radio v-model="shipForm.shipCode" label="0">物流</el-radio>
						<el-radio v-model="shipForm.shipCode" label="1">整车</el-radio>
					</template>
				</el-form-item>
				<template v-if="shipForm.shipCode == 0">
					<el-form-item label="快递编号">
						<el-input v-model="shipForm.shipmentNumber"/>
					</el-form-item>
				</template>
				<template v-if="shipForm.shipCode == 1">
					<el-form-item label="司机名称">
						<el-input v-model="shipForm.driverName"/>
					</el-form-item>
					<el-form-item label="车牌号">
						<el-input v-model="shipForm.numberPalte"/>
					</el-form-item>
					<el-form-item label="联系方式">
						<el-input v-model="shipForm.driverPhone"/>
					</el-form-item>
				</template>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="shipDialogVisible = false">取消</el-button>
				<el-button :disabled="shipSubmiting" type="primary" @click="confirmShip">确定</el-button>
			</div>
		</el-dialog>

		<!-- 退款对话框 -->
		<el-dialog :visible.sync="refundDialogVisible" title="退款">
			<el-form ref="refundForm" :model="refundForm" :rules="refundRules" status-icon label-position="left"
			         label-width="100px" style="width: 400px; margin-left:50px;">
				<el-form-item label="tips"><span>允许退款后钱会退回对方账户</span></el-form-item>
				<el-form-item label="操作">
					<el-radio v-model="refundForm.type" label="0">允许退款</el-radio>
					<el-radio v-model="refundForm.type" label="1">拒绝退款</el-radio>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="refundForm.remark"/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="refundDialogVisible = false">取消</el-button>
				<el-button :disabled="refundSubmiting" type="primary" @click="confirmRefund">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>


<script>
	import {
		listOrder,
		shipOrder,
		driverOrder,
		refundOrder,
		detailOrder
	} from '@/api/order'
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import checkPermission from '@/utils/permission' // 权限判断函数

	const statusMap = {
		1: '待付款',
		2: '待发货',
		3: '已发货',
		4: '运输中',
		5: '交易成功',
		6: '已完成',
		7: '待评价',
		8: '售后',
		9: '退款',
		10: '取消订单',
		11: '售后已驳回'
	}

	const payChannelMap = {
		0: '未支付',
		1: '微信支付',
		2: '支付宝',
		3: '测试支付'
	}

	export default {
		name: 'Order',
		components: {Pagination},
		filters: {
			orderStatusFilter(status) {
				return statusMap[status]
			},
			payChannelFilter(channel) {
				const str = payChannelMap[channel]
				if (str) {
					return str
				}
				return '未支付'
			},
			shipCodeFilter(shipCode) {
				if (shipCode == 0) {
					return '物流'
				} else {
					return '整车'
				}
				return '未发货'
			}
		},
		data() {
			return {
				list: undefined,
				total: 0,
				listLoading: true,
				listQuery: {
					pageNum: 1,
					pageSize: 10,
					orderNum: undefined,
					status: undefined,
					receiver: undefined,
				},
				statusMap,
				orderDialogVisible: false,
				orderDetail: {},
				refundForm: {
					id: undefined,
					type: '0',
					remark: undefined
				},
				refundDialogVisible: false,
				refundSubmiting: false,
				shipForm: {
					orderId: undefined,
					shipCode: '0',
					shipmentNumber: undefined,
					driverName: undefined,
					numberPalte: undefined,
					driverPhone: undefined,
					driverLicense: null,
					drivingLicense: null
				},
				shipDialogVisible: false,
				shipSubmiting: false,
				refundRules: {
					remark: [{required: true, message: '请请填写退款信息', trigger: 'blur'}]
				},
				shipRules: {}
			}
		},
		created() {
			this.getList()
		},
		methods: {
			checkPermission,
			getList() {
				this.listLoading = true
				listOrder(this.listQuery)
					.then(res => {
						this.list = res.data.records
						this.total = res.data.total
						this.listLoading = false
					})
					.catch(() => {
						this.list = []
						this.total = 0
						this.listLoading = false
					})
			},
			handleFilter() {
				this.listQuery.pageNum = 1
				this.getList()
			},
			handleDetail(row) {
				detailOrder(row.id).then(res => {
					this.orderDetail = res.data
				})
				this.orderDialogVisible = true
			},
			handleShip(row) {
				this.shipForm.orderId = row.id
				this.shipDialogVisible = true
			},
			confirmShip() {
				this.$refs['shipForm'].validate(valid => {
					if (valid) {
						if (this.shipForm.shipCode == '0') {
							if (!this.shipForm.shipmentNumber) {
								this.$notify.error({
									title: '失败',
									message: '请填写物流单号'
								})
								return
							}
							this.shipSubmiting = true
							shipOrder(this.shipForm)
								.then(res => {
									this.shipSubmiting = false
									this.shipDialogVisible = false
									this.$notify.success({
										title: '成功',
										message: '确认发货成功！'
									})
									this.getList()
								})
								.catch(res => {
									this.shipSubmiting = false
									this.$notify.error({
										title: '失败',
										message: res
									})
								})
						} else {
							if (!this.shipForm.driverName || !this.shipForm.numberPalte || !this.shipForm.driverPhone) {
								this.$notify.error({
									title: '失败',
									message: '请填写司机信息'
								})
								return
							}
							this.shipSubmiting = true
							driverOrder(this.shipForm)
								.then(res => {
									this.shipSubmiting = false
									this.shipDialogVisible = false
									this.$notify.success({
										title: '成功',
										message: '确认发货成功！'
									})
									this.getList()
								})
								.catch(res => {
									this.shipSubmiting = false
									this.$notify.error({
										title: '失败',
										message: res
									})
								})
						}


					}
				})
			},
			handleRefund(row) {
				const obj = {
					id: row.id,
					type: '0',
					remark: row.remark
				}
				this.refundForm = Object.assign(this.refundForm, obj)
				this.refundDialogVisible = true
			},
			confirmRefund() {
				this.$refs['refundForm'].validate(valid => {
					if (valid) {
						this.refundSubmiting = true
						const obj = {
							orderId: this.refundForm.id,
							type: this.refundForm.type,
							remark: this.refundForm.remark
						}
						refundOrder(obj)
							.then(res => {
								this.refundSubmiting = false
								this.refundDialogVisible = false
								this.$notify.success({
									title: '成功',
									message: '确认退款成功！'
								})
								this.getList()
							})
							.catch(res => {
								this.refundSubmiting = false
								this.$notify.error({
									title: '失败',
									message: res
								})
							})
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
</style>
